<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高亮文字</title>
</head>
<body>
    <input type="text">
    <!-- 生成一段文字 -->
    <p>高亮文字 阿达 古诗文 100首 萨乌丁阿萨德撒设法速度第三方第三方第三方第三方水电费递四方速递佛挡杀佛sd ds父
        dsf ds父sdf sd父
        dsf ds 
        fds fsd 
        fds f第三方都是父第三方水电费
        但是
        第三方

        的
        f 
        sd sf但是方式电风扇
        第三方
        的
        f 
        sd sf但是方式电风扇
        第三方
        的
        f 
        sd sf但是方式电风扇
        第三方
        的
        f 
        sd sf但是方式电风扇
    </p>

    <script>
        let p = document.querySelector('p');
        let target = p.innerHTML;

        let input = document.querySelector('input');

        // 监听input输入框的值，然后替换p标签中的值
        input.addEventListener('input', function(e){
            let value = e.target.value;
            let reg = new RegExp(value, 'g');
            let newTarget = target.replace(reg, (t)=> {
                return `<span class="highlight">${t}</span>`;
            });
            p.innerHTML = newTarget;
        })
    </script>
    <style>
        .highlight{
            background: #ff0;
            color: #000;
            padding: 0 2px;
        }
    </style>
</body>
</html>